<template>
  <div class="balls" ref="balls">
    <div class="ball" v-for="(item,index) in nums" :key="index"></div>
  </div>
</template> 

<script>
import { SSCAnimate } from './sscAnimate'

export default {
    props: ['nums'],
    data () {
        return {
            timer: null,
            balls: []
        }
    },
    mounted () {
        this.createNum()
        this.start()
        // this.timer = setInterval(this.start, 8000)
    },
    methods: {
        createNum () {
            this.$refs.balls.children.forEach(b => {
                this.balls.push(
                    new SSCAnimate({
                        el: b,
                        nums: this.nums,
                        onEnd (num) {
                            console.log(num)
                        }
                    })
                )
            })
        },
        start () {
            this.balls.forEach(b =>
                b.start({
                    outMS: 200, // 每次数字中间落到底部的动画时长
                    inMS: 100, // 每次数字从上面落入中间的动画时长
                    times: Infinity, // 数字变化的次数
                    delay: Math.round(2000 * Math.random()) // 延迟多少ms开启动画
                })
            )
        }
    }
}
</script>
<style lang="less">
.balls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .ball {
        display: inline-block;
        width: 36px;
        height: 36px;
        line-height: 36px;
        border: 1px solid #e5e5e5;
        border-radius: 50%;
        overflow: hidden;
        background: blue;
        color: #fff;
    }
}
</style>